<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车综合案例</title>
    <script src="../vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            margin: 0 auto;
            /* min-height: 400px; */
            list-style: none;
            border: 2px solid black;
            padding: 10px;
        }

        ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #999;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        ul li:first-child {
            justify-content: left;
            padding-top: 0px;
        }

        ul li:last-child {
            justify-content: left;
            padding-bottom: 0px;
            border-bottom: none;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li>
                <input type="checkbox" v-model="isAllChecked" @change="handleAllChange">
                <span>全选/全不选</span>
            </li>
            <template v-if="dataList.length">
                <li v-for="(item,index) in dataList" :key="item.id">
                    <div>
                        <input type="checkbox" v-model="checkList" :value="item" @change="handleItemChange">
                    </div>
                    <div>
                        {{item.title}}
                    </div>
                    <div>
                        <img :src="item.poster" :alt="item.title" width="200px" height="100px">
                    </div>
                    <div>
                        ¥{{item.price}}
                    </div>
                    <div>
                        <button @click="item.number--" :disabled="item.number<=1">-</button>
                        {{item.number}}
                        <button @click="item.number++" :disabled="item.number>=item.limit">+</button>
                    </div>
                    <div>
                        <button @click="handleDel(index,item.id)">删除</button>
                    </div>
                </li>
            </template>
            <li v-else="dataList.length">
                <span>购物车空空如也</span>
            </li>
            <li>
                <span>总金额:</span>
                <span>{{sum()}}</span>
            </li>
        </ul>
        <!-- {{checkList}} -->
    </div>
    <script>
        let obj = {
            data() {
                return {
                    dataList: [
                        {
                            id: 1,
                            title: '暴电熊',
                            number: 1,
                            poster: 'https://pp3.oscaches.com/pp3/imgfile/20240131/31174911wms2.jpg',
                            price: 199,
                            limit: 4,
                        },
                        {
                            id: 2,
                            title: '捣蛋猫',
                            number: 1,
                            poster: 'https://q7.itc.cn/images01/20240119/65ffbfce75f8404db1c0d111ceafd0c8.jpeg',
                            price: 3,
                            limit: 4,
                        },
                        {
                            id: 3,
                            title: '花冠龙',
                            number: 1,
                            poster: 'https://p7.itc.cn/q_70/images03/20220915/c20512c1e75943aa938a41253f9c6fec.jpeg',
                            price: 49,
                            limit: 4,
                        },
                        {
                            id: 4,
                            title: '灌木羊',
                            number: 1,
                            poster: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fvideoimg.ws.126.net%2Fcover%2F20240118%2FIr8j1Rui4_cover.jpg&thumbnail=668y375&quality=95&type=jpg',
                            price: 19,
                            limit: 4,
                        },
                    ],
                    checkList: [],
                    isAllChecked: false,
                }
            },
            methods: {
                sum() {
                    let total = 0;
                    return this.checkList.reduce((total, item) => total + item.price * item.number, 0);
                },
                handleDel(index, id) {
                    this.dataList.splice(index, 1);
                    this.checkList = this.checkList.filter(item => item.id != id);
                    this.handleItemChange()
                },
                handleAllChange() {
                    this.checkList = this.isAllChecked ? this.dataList : [];
                },
                handleItemChange(){
                    if(this.dataList.length===0) {
                        this.isAllChecked = false;
                        return;
                    }
                    this.isAllChecked = this.checkList.length==this.dataList.length?true:false;
                }
            },
        }
        let app = Vue.createApp(obj).mount('#box')
    </script>
</body>

</html>